@import "../../common/config.scss";
$auiBtnPrimaryActive: #029545;
.aui-confirm{
	@include absWin;
	z-index: 999;
	@at-root &__inner{
		@include absWin;
		@include flexbox;
		@include flexCenterVeri;
		@include flexCenterHori;
		@at-root &__dialog{
			position: relative;
			overflow: hidden;
			width: 80%;
			max-width: 5.5rem;
			@include borderRadius(4px);
			background-color: rgba(255, 255, 255, 0.95);
			@at-root &__content{
				min-height: 2rem;
				padding: 0.4rem;
				@at-root &__title{
					font-size: 0.32rem;
					color: $fontStrongColor;
					text-align: center;
					line-height: 0.45rem;
				}
				@at-root &__msg{
					font-size: 0.28rem;
					color: $fontColor;
					line-height: 0.35rem;
					padding-top: 0.3rem;
					text-align: justify;
					@include flexbox;
					@include flexCenterHori;
				}
			}
			@at-root &__buttons{
				@include flexbox;
				@at-root &__button{
					position: relative;
					display: block;
					width: 100%;
					margin-bottom: 0;
					text-align:center;
					background-color: $bgColor;
					white-space: nowrap;
					vertical-align: middle;
					@include touchAction;
					@include userSelect;
				    cursor: pointer;
				    @include borderRadius();
					color: $kvColor;
					outline: 0;
					margin-bottom: 0;
					border: 0;
					line-height: 0.6rem;
					padding-top: 0.2rem;
					padding-bottom: 0.2rem;
					font-size: 0.30rem;
					border-radius: 0 0 5px 5px;
					font-weight: 500;
					background-color: rgba(0, 0, 0, 0);
					&:active{
						background-color: $bgDarkColor;
						color: $auiBtnPrimaryActive;
					}

					@include flexAuto;
					&:first-child{
						border-radius: 0 0 0 5px;
					}
					&:last-child{
						border-radius: 0 0 5px 0;
					}
				}
			}
		} 
	}
	
	@at-root &__masker{
		@include absWin;
		background-color: rgba(0, 0, 0, 0.35);
	}
	
	@keyframes aui-confirm-enter-animation{
		0% {-webkit-transform: scale(1.4,1.4) translateY(-20px); opacity: 0;}
		100% {-webkit-transform: scale(1,1) translateY(0); opacity: 1;}
	}
	@keyframes aui-confirm-makser-enter-animation{
		0% {opacity: 0;}
		100% {opacity: 1;}
	}
	@keyframes aui-confirm-leave-animation{
		0% {-webkit-transform: scale(1, 1); opacity: 1;}
		100% {-webkit-transform: scale(0.95, 0.95); opacity: 0;}
	}
	@keyframes aui-confirm-masker-leave-animation{
		0% { opacity: 1;}
		100% {opacity: 0;}
	}
	@at-root .aui-confirm-enter-active{
		animation: aui-confirm-enter-animation 0.4s cubic-bezier(0, 1.03, 0.07, 0.99) forwards;
	}
	
	@at-root .aui-confirm-masker-enter-active{
		animation: aui-confirm-makser-enter-animation 0.4s linear forwards;
	}
	
	@at-root .aui-confirm-leave-active{
		animation: aui-confirm-leave-animation  0.25s ease-in forwards;
	}
	
	@at-root .aui-confirm-masker-leave-active{
		animation: aui-confirm-masker-leave-animation  0.25s ease-in forwards;
	}
}